<template>
  <div class="search">
    <Card>
      <Modal
        v-model="emitmodal"
        @on-ok="emitok"
        @on-cancel="emitmodal = false"
        title="会员等级信息编辑"
      >
        <div class="f-row">
          <div>等级</div>
          <Input
            type="text"
            v-model="emitForn.level"
            clearable
            style="width: 200px"
          />
        </div>
        <div class="f-row">
          <div>消费门槛(元)</div>
          <Input
            type="number"
            placeholder="请输入消费门槛"
            v-model="emitForn.experienceValue"
            clearable
            style="width: 200px"
          />
        </div>
        <div class="f-row">
          <div>等级名称</div>
          <Input
            type="text"
            placeholder="请输入等级名称"
            v-model="emitForn.gradeName"
            clearable
            style="width: 200px"
          />
        </div>
      </Modal>
      <Row class="operation padding-row" v-if="!addGrade">
        <Button @click="addGrade = true" type="primary">添加</Button>
      </Row>

      <Row v-else>
        <Form inline :label-width="80" class="search-form">
          <Form-item label="等级" prop="username">
            <Input
              type="text"
              v-model="addMemberGradeForm.level"
              clearable
              style="width: 200px"
            />
          </Form-item>

          <Form-item label="等级名称" prop="nickName">
            <Input
              type="text"
              placeholder="请输入等级名称"
              v-model="addMemberGradeForm.gradeName"
              clearable
              style="width: 200px"
            />
          </Form-item>

          <Form-item label="消费门槛(元)" prop="mobile">
            <Input
              type="number"
              placeholder="请输入消费门槛"
              v-model="addMemberGradeForm.experienceValue"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Button @click="save" class="search-btn" type="primary">保存</Button>
          <Button @click="addGrade = false" class="search-btn" type="primary"
            >取消</Button
          >
        </Form>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="paging.pageNumber"
          :total="total"
          :page-size="paging.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <!-- 修改模态框 -->
    <Modal v-model="descFlag" @on-ok="handleSubmitModal" width="1000">
      <Form ref="form" :model="form" :rules="ruleValidate" :label-width="200">
        <FormItem label="PLUS会员类型:" prop="name">
          <div>月卡</div>
        </FormItem>
        <FormItem label="价格:" prop="name">
          <Input
            v-model="form.username"
            style="width: 200px"
            placeholder="最多两位小数"
          />
        </FormItem>
        <FormItem label="有效期（天）:" prop="name">
          <Input
            v-model="form.nickName"
            style="width: 200px"
            placeholder="最多两位小数"
          />
        </FormItem>
        <FormItem label="折扣率:" prop="sex">
          <Input
            v-model="form.username"
            style="width: 200px"
            placeholder="最多两位小数"
          />
        </FormItem>
      </Form>
    </Modal>
    <Modal width="1200px" v-model="picModelFlag">
      <ossManage @callback="callbackSelected" ref="ossManage" />
    </Modal>
  </div>
</template>

<script>
import {
  addMemberGrade,
  memberGradeList,
  delMemberGrade,
} from "@/api/shopNewApi.js";
import region from "@/components/region";
import * as API_Member from "@/api/member.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import * as RegExp from "@/libs/RegExp.js";

export default {
  name: "member",
  components: {
    region,
    ossManage,
  },
  data() {
    return {
      emitForn: { level: "", gradeName: "", experienceValue: "" }, //编辑表单
      emitmodal: false, //编辑弹框
      paging: {
        pageNumber: 1,
        pageSize: 10,
      },
      addGrade: false, //是否添加会员等级

      descTitle: "", // modal标题
      descFlag: false, //编辑查看框
      loading: true, // 表单加载状态
      addFlag: false, // modal显隐控制
      updateRegion: false, // 地区
      addMemberGradeForm: {
        // 添加等级表单
        level: "",
        gradeName: "",
        experienceValue: "",
      },
      picModelFlag: false, // 选择图片
      form: {}, // 表单数据
      addRule: {
        // 验证规则
        mobile: [
          { required: true, message: "请输入手机号码" },
          {
            pattern: RegExp.mobile,
            message: "请输入正确的手机号",
          },
        ],
        username: [{ required: true, message: "请输入会员名称" }],
        password: [{ required: true, message: "请输入密码" }],
      },
      ruleValidate: {}, //修改验证
      columns: [
        {
          title: "等级",
          key: "level",
          tooltip: true,
        },
        {
          title: "等级名称",
          key: "gradeName",
          tooltip: true,
        },
        {
          title: "消费门槛（元）",
          key: "experienceValue",
          tooltip: true,
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          fixed: "right",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  justifyContent: "center",
                },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      display: "flex",
                      justifyContent: "center",
                      marginRight: "10px",
                    },
                  },
                  [
                    h(
                      "Button",
                      {
                        style: {
                          color: "#fff",
                          backgroundColor: "#ff5c58",
                        },
                        on: {
                          click: () => {
                            this.emit(params.row);
                          },
                        },
                      },
                      "编辑"
                    ),
                  ]
                ),
                h(
                  "div",
                  {
                    style: {
                      display: "flex",
                      justifyContent: "center",
                    },
                  },
                  [
                    h(
                      "Button",
                      {
                        on: {
                          click: () => {
                            this.delFn(params.row);
                          },
                        },
                      },
                      "删除"
                    ),
                  ]
                ),
              ]
            );
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      selectMember: [], //保存选中的用户
    };
  },

  methods: {
    getList() {
      memberGradeList({
        pageNumber: this.paging.pageNumber,
        pageSize: this.paging.pageSize,
      }).then((res) => {
        this.loading = false;
        this.total = res.result.total;
        this.data = res.result.records;
        console.log(this.data, 998);
      });
    },
    // 回调给父级
    callback(val, index) {
      this.$set(val, "___selected", !val.___selected);
      console.log(val.___selected);
      console.log(this.selectMember);
      let findUser = this.selectMember.find((item) => {
        return item.id == val.id;
      });
      // 如果没有则添加
      if (!findUser) {
        this.selectMember.push(val);
      } else {
        // 有重复数据就删除
        this.selectMember.map((item, index) => {
          if (item.id == findUser.id) {
            this.selectMember.splice(index, 1);
          }
        });
      }

      this.$emit("callback", val);
    },
    // 初始化信息
    init(data) {
      data.forEach((item) => {
        if (this.selectMember.length != 0) {
          this.selectMember.forEach((member) => {
            if (member.id == item.id) {
              this.$set(item, "___selected", true);
            }
          });
        } else {
          this.$set(item, "___selected", false);
        }
      });
      this.data = data;
    },
    // 分页 改变页码
    changePage(v) {
      this.paging.pageNumber = v;
      this.getList();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.paging.pageSize = v;
      this.paging.pageNumber = 1;
      this.getList();
    },
    // 保存
    save() {
      addMemberGrade({
        level: this.addMemberGradeForm.level,
        experienceValue: this.addMemberGradeForm.experienceValue,
        gradeName: this.addMemberGradeForm.gradeName,
      }).then((res) => {
        if (res.success) {
          this.paging.pageNumber = 1;
          this.paging.pageSize = 10;
          this.getList();
        }
      });
    },
    /**
     * 查询查看会员详情
     */
    getMemberInfo(id) {
      API_Member.getMemberInfoData(id).then((res) => {
        if (res.result) {
          this.$set(this, "form", res.result);
        }
      });
    },
    // 选中的图片
    callbackSelected(val) {
      this.picModelFlag = false;
      this.form.face = val.url;
    },
    //保持编辑
    emitok() {},
    //编辑
    emit(e) {
      this.emitmodal = true;
      this.emitForn.level=e.level
      this.emitForn.experienceValue=e.experienceValue
      this.emitForn.gradeName=e.gradeName
      console.log(this.emitForn, 998);
    },
    //删除
    delFn(e) {
      delMemberGrade(e.id).then((res) => {
        if (res.success) {
          this.paging.pageNumber = 1;
          this.paging.pageSize = 10;
          this.getList();
        }
      });
      console.log(e);
    },
    // 提交修改数据
    handleSubmitModal() {
      console.log("弹框确定按钮");
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.f-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  div {
    margin-right: 20px;
    width: 80px;
  }
}
::v-deep .ivu-modal-body {
  padding-top: 50px;
}
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>
